<!--
 * @FileDescription 点云呈现设置网页
 * @Author 杨宇翔
 * @Date 20220714 10:39:37
 * @LastEditors 杨宇翔
 * @LastEditTime 20220714 10:39:37
-->
<template>
    <div v-if="Iframe" class="box">
        <text class="close" @click="closeIframe">×</text>
        <!-- <iframe class="ifeamePage" src="http://192.168.1.200/cgi-bin/param_setting.cgi" width="1520" height="900" id="Myiframe"></iframe> -->
        <iframe class="ifeamePage" src="http://192.168.1.200/cgi-bin/param_setting.cgi" id="Myiframe"></iframe>
    </div>

    <!-- 不连接状态下，只显示两个图片，只有配置任务可点击，连接的状态下，显示两个图片，都可以点击 -->
    <!-- <img  v-if="ExamComponent.Default.LaserDeviceStatus.value == '设备连接成功'" class="Pic" src="/public/static/Exam/激光雷达/ic_点云呈现_select.png" @click="closeIframe">
    <img v-else class="Pic" src="/public/static/Exam/激光雷达/ic_点云呈现_select.png">
    
    <p v-if="ExamComponent.Default.LaserDeviceStatus.value == '设备连接成功'" class="txt">点云呈现</p>
    <p v-else class="txt">雷达配置</p> -->

    <!-- 点击、连接 -->
    <img class="Pic" v-if="showRadarSitePage && ExamComponent.Default.LaserDeviceStatus.value == '设备连接成功'" src="/public/static/Exam/激光雷达/ic_雷达配置_select.png">
    <img class="Pic" v-if="showRadarSitePage" src="/public/static/Exam/激光雷达/ic_雷达配置_select.png">
    <img class="Pic" v-if="!showRadarSitePage" src="/public/static/Exam/激光雷达/ic_雷达配置_normal.png" @click="RadarSiteOpen">
    <p class="txt">雷达配置</p>
   

    <img class="Pic2" v-if="SitetaskPage" src="/public/static/Exam/激光雷达/ic_配置任务_select.png" >
    <img class="Pic2" v-else src="/public/static/Exam/激光雷达/ic_配置任务_normal.png" @click="SitetaskOpen">
    <p class="txt2">配置任务</p>

    <div class="SitetaskBox" v-if="SitetaskPage && !ExamComponent.Default.RegulationGame.value">
        <div class="head">
            <h2>激光雷达配置任务</h2>
            <div class="closeSitetaskBox" @click="SitetaskClose"><span>×</span></div>
        </div>
        <div class="contentBody">
            <div class="left">
                <img class="schematicDiagram" src="/public/static/Exam/激光雷达/左边示意图.png">
                <img v-if="Number(ExamComponent.Default.fieldAngle.value[1]) == 360" class="leftTop" src="/public/static/Exam/激光雷达/左上.png">
                <img v-if="Number(ExamComponent.Default.fieldAngle.value[0]) == 0" class="rightTop" src="/public/static/Exam/激光雷达/右上.png">
                <img v-if="Number(ExamComponent.Default.fieldAngle.value[0]) <= 180 && Number(ExamComponent.Default.fieldAngle.value[1]) >= 270" class="leftLow" src="/public/static/Exam/激光雷达/左下.png">
                <img v-if="Number(ExamComponent.Default.fieldAngle.value[0]) <= 90 && Number(ExamComponent.Default.fieldAngle.value[1]) >= 180" class="rightLow" src="/public/static/Exam/激光雷达/右下.png">
            </div>
            <div class="right">
                <div class="taskDemand">
                    <img class="taskDemandPic" src="/public/static/Exam/激光雷达/任务要求.png">
                    <h3>任务要求</h3>
                </div>
                <div class="taskSet">
                    <img class="taskPic" v-if="ExamComponent.Default.ViewingAngle.value == true && ExamComponent.Default.isSubmit.value" src="/public/static/Exam/激光雷达/完成选项.png">
                    <img class="taskPic" v-if="ExamComponent.Default.ViewingAngle.value == false && ExamComponent.Default.isSubmit.value" src="/public/static/Exam/激光雷达/错误选项.png">
                    <text>请将激光雷达视角设置为左图所示视场角</text>
                </div>
            </div>
        </div>
        <div class="submit">
           <img class="submitPic" src="/public/static/Exam/激光雷达/提交.png" @click="submitRadarSite">
           <p style="color: #ffffff;">*请务必按照要求完成雷达配置,否则成绩无效.</p>
        </div>
    </div>

    <div class="SitetaskBox" v-if="SitetaskPage && ExamComponent.Default.RegulationGame.value">
        <div class="head">
            <h2>激光雷达配置任务</h2>
            <div class="closeSitetaskBox" @click="SitetaskClose"><span>×</span></div>
        </div>
        <div class="contentBody">
            <div class="left">
                <img class="schematicDiagram" src="/public/static/Exam/激光雷达/左边示意图.png">
                <img v-if="Number(ExamComponent.Default.fieldAngle.value[1]) == 360" class="leftTop" src="/public/static/Exam/激光雷达/左上.png">
                <img v-if="Number(ExamComponent.Default.fieldAngle.value[0]) == 0" class="rightTop" src="/public/static/Exam/激光雷达/右上.png">
                <img v-if="Number(ExamComponent.Default.fieldAngle.value[0]) <= 180 && Number(ExamComponent.Default.fieldAngle.value[1]) >= 270" class="leftLow" src="/public/static/Exam/激光雷达/左下.png">
                <img v-if="Number(ExamComponent.Default.fieldAngle.value[0]) <= 90 && Number(ExamComponent.Default.fieldAngle.value[1]) >= 180" class="rightLow" src="/public/static/Exam/激光雷达/右下.png">
            </div>
            <div class="right">
                <div class="taskDemand">
                    <img class="taskDemandPic" src="/public/static/Exam/激光雷达/任务要求.png">
                    <h3>任务要求</h3>
                </div>
                <div class="taskSet">
                    <!-- <img class="taskPic" v-if="ExamComponent.Default.isMSOPPort.value && ExamComponent.Default.isSubmit.value" src="/public/static/Exam/激光雷达/完成选项.png"> -->
                    <!-- <img class="taskPic" v-if="!ExamComponent.Default.isMSOPPort.value && ExamComponent.Default.isSubmit.value" src="/public/static/Exam/激光雷达/错误选项.png"> -->
                    <text>请将雷达MSOP Port端口设置为</text>
                    <!-- <input type="text" v-model="MSOPPortValue"> -->
                </div>
                <div class="taskSet">
                    <!-- <img class="taskPic" v-if="ExamComponent.Default.isDIFOPPort.value && ExamComponent.Default.isSubmit.value" src="/public/static/Exam/激光雷达/完成选项.png"> -->
                    <!-- <img class="taskPic" v-if="!ExamComponent.Default.isDIFOPPort.value && ExamComponent.Default.isSubmit.value" src="/public/static/Exam/激光雷达/错误选项.png"> -->
                    <text>请将雷达DIFOP Port端口设置为</text>
                    <!-- <input type="text" v-model="DIFOPPortValue"> -->
                </div>
                <div class="taskSet">
                    <!-- <img class="taskPic" v-if="ExamComponent.Default.isRotateSpeed.value && ExamComponent.Default.isSubmit.value" src="/public/static/Exam/激光雷达/完成选项.png"> -->
                    <!-- <img class="taskPic" v-if="!ExamComponent.Default.isRotateSpeed.value && ExamComponent.Default.isSubmit.value" src="/public/static/Exam/激光雷达/错误选项.png"> -->
                    <text>请将雷达转速设置为</text>
                    <!-- <input type="text" v-model="RotateSpeedValue"> -->
                </div>
                <div class="taskSet">
                    <!-- <img class="taskPic" v-if="ExamComponent.Default.ViewingAngle.value && ExamComponent.Default.isSubmit.value" src="/public/static/Exam/激光雷达/完成选项.png"> -->
                    <!-- <img class="taskPic" v-if="!ExamComponent.Default.ViewingAngle.value && ExamComponent.Default.isSubmit.value" src="/public/static/Exam/激光雷达/错误选项.png"> -->
                    <text>请将激光雷达视角设置为左图所示视场角</text>
                </div>
            </div>
        </div>
        <div class="submit">
           <img src="/public/static/Exam/激光雷达/提交.png" @click="submitRadarSiteCom">
           <p style="color: #ffffff;">*请务必按照要求完成雷达配置,否则成绩无效.</p>
        </div>
    </div>

</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import ExamComponent from './ExamComponent';
import AppSettings from "@runtime/base/AppSettings";
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css'
const showRadarSitePage = ref(false)
const SitetaskPage = ref(false)
const Iframe = ref(false)
// 雷达配置打开网页
function closeIframe() {
    Iframe.value = false
    showRadarSitePage.value = false
}
// 雷达配置
function RadarSiteOpen() {
    showRadarSitePage.value = true
    SitetaskPage.value = false
    // if(ExamComponent.Default.LaserDeviceStatus.value == '设备连接成功') {
        Iframe.value = true
    // }
}
// 配置任务
function SitetaskOpen() {
    SitetaskPage.value = true
    showRadarSitePage.value = false
}
function SitetaskClose() {
    SitetaskPage.value = false
}
// 提交
async function submitRadarSite() {
    if(ExamComponent.Default.LaserDeviceStatus.value != '设备连接成功'){
        ElMessage({
            message: '请检查设备连接情况',
            type: 'warning',
        })
    } else {
        ExamComponent.Default.isSubmit.value = true
        await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.LaserRadarSettingsRequest(6698,7789));
    }
}
// 比赛提交
async function submitRadarSiteCom() {
    if(ExamComponent.Default.LaserDeviceStatus.value != '设备连接成功'){
        ElMessage({
            message: '请检查设备连接情况',
            type: 'warning',
        })
    } else {
        ExamComponent.Default.isSubmit.value = true
        await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.LaserRadarSettingsRequest(ExamComponent.Default.setValue.value.MSOPPortValue,ExamComponent.Default.setValue.value.DIFOPPortValue));
    }
}
</script>

<style scoped>
.box {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.close {
    font-size: 4rem;
    color: black;
    position: absolute;
    right: 2.8rem;
    top: 0.7rem;
}
.ifeamePage {
    width: 152rem;
    height: 90rem;
    border-radius: 2rem;
    border: solid 0.6rem transparent;
    background-image: linear-gradient(#ffffff, #ffffff),
        linear-gradient(90deg, #218cde, #807de1);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.configuration {
    position: absolute; 
    top: 50%;
    right: 0; 
    transform: translate(0rem,-50%);
    width: 13.5rem;
    height: 5rem;
    text-align: center;
    line-height: 5rem;
    background-color: #ffffff;
    font-size: 1.6rem;
    border-radius: 0.5rem;
}
.Pic {
    width: 7.4rem;
    height: 7.4rem;
    position: absolute;
    right: 5.9rem;
    bottom: 5rem;
}
.txt {
    color: #81859c;
    position: absolute;
    bottom: 2rem;
    right: 6.2rem;
    font-size: 1.6rem;
}
.Pic2 {
    width: 7.4rem;
    height: 7.4rem;
    position: absolute;
    right: 15.9rem;
    bottom: 5rem;
}
.txt2 {
    color: #81859c;
    position: absolute;
    bottom: 2rem;
    right: 16.2rem;
    font-size: 1.6rem;
}
.SitetaskBox {
    width: 105rem;
    height: 59.1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 2rem;
    border: solid 0.6rem transparent;
    background-image: linear-gradient(#131620, #131620),
        linear-gradient(90deg, #218cde, #807de1);
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.head {
    margin-top: 2rem;
    margin-left: 2.4rem;
    display: flex;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 1.8rem;
    color: #FFFFFF;
    text-align: left;
    font-style: normal;
}
.closeSitetaskBox {
    width: 4rem;
    height: 4rem;
    background: #292c38;
    border-radius: 2rem;
    margin-left: 73.5rem;
}
.closeSitetaskBox > span {
    width: 2.22rem;
    height: 3.9rem;
    font-size: 3.5rem;
    position: absolute;
    top: 1.4rem;
    right: 3.5rem;
}
.contentBody {
    margin-bottom: 5rem;
    margin-top: 2rem;
    width: 104rem;
    height: 32rem;
    display: flex;
}
.left {
    width: 45rem;
    height: 100%;
}
.schematicDiagram {
    width: 21.1rem;
    height: 21.4rem;
    margin-left: 16.5rem;
    margin-top: 3.6rem;
}
.leftTop {
    width: 5.6rem;
    height: 5.7rem;
    position: absolute;
    top: 16.7rem;
    left: 21.7rem;
}
.rightTop {
    width: 5.6rem;
    height: 5.7rem;
    position: absolute;
    top: 16.7rem;
    left: 27.2rem;
}
.leftLow {
    width: 5.6rem;
    height: 5.7rem;
    position: absolute;
    top: 22.2rem;
    left: 21.7rem;
}
.rightLow {
    width: 5.6rem;
    height: 5.7rem;
    position: absolute;
    top: 22.2rem;
    left: 27.2rem;
}
.right {
    width: 59rem;
    height: 100%;
    padding-left: 4.6rem;
    font-size: 1.6rem;
    color: #ffffff;
}
.taskDemand {
    display: flex;
    height: 4rem;
    width: 46.7rem;
    font-size: 1.8rem;
    border-bottom: 0.1rem solid #2f3340;
}
.taskDemandPic {
    height: 2.8rem;
    width: 2.8rem;
    margin-top: 0.2rem;
    margin-right: 2rem;
}
.taskPic {
    width: 2.8rem;
    height: 2.8rem;
    margin-right: 2rem;
}
.taskSet {
    height: 2.8rem;
    line-height: 2.8rem;
    display: flex;
    margin-top: 2.5rem;
}
input {
    color: #ffffff;
    border: 0.1rem solid #ffffff;
    border-radius: 0.5rem;
    width: 7rem;
    height: 2.5rem;
    margin-left: 0.5rem;
    margin-top: 0.2rem;
    padding: 0 0.2rem;
    text-align: center;
}
.submit {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 5.2rem;
}
.submit > p {
    font-size: 1.2rem;
}
.submitPic {
    width: 25rem;
    height: 10rem
}
</style>